<template>
  <div class="my-submissions">
    <!-- 统计概览 -->
    <div class="stats-overview">
      <div class="stats-grid">
        <div class="stat-card">
          <div class="stat-icon">
            <el-icon><Document /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ stats.totalSubmissions }}</div>
            <div class="stat-label">总提交数</div>
          </div>
        </div>

        <div class="stat-card">
          <div class="stat-icon accepted">
            <el-icon><CircleCheck /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ stats.acceptedSubmissions }}</div>
            <div class="stat-label">通过提交</div>
          </div>
        </div>

        <div class="stat-card">
          <div class="stat-icon">
            <el-icon><TrendCharts /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ stats.acceptanceRate }}%</div>
            <div class="stat-label">通过率</div>
          </div>
        </div>

        <div class="stat-card">
          <div class="stat-icon">
            <el-icon><Trophy /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ stats.solvedProblems }}</div>
            <div class="stat-label">解决题目</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 筛选和搜索 -->
    <div class="filter-section">
      <div class="filter-left">
        <el-input
          v-model="searchKeyword"
          placeholder="搜索题目名称..."
          clearable
          @input="handleSearch"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
      </div>

      <div class="filter-right">
        <el-select v-model="statusFilter" placeholder="提交状态" @change="handleFilter">
          <el-option label="全部状态" value="" />
          <el-option label="通过" value="accepted" />
          <el-option label="答案错误" value="wrong_answer" />
          <el-option label="超时" value="time_limit_exceeded" />
          <el-option label="运行错误" value="runtime_error" />
          <el-option label="编译错误" value="compile_error" />
        </el-select>

        <el-select v-model="languageFilter" placeholder="编程语言" @change="handleFilter">
          <el-option label="全部语言" value="" />
          <el-option label="JavaScript" value="JavaScript" />
          <el-option label="Python" value="Python" />
          <el-option label="Java" value="Java" />
          <el-option label="C++" value="C++" />
          <el-option label="Go" value="Go" />
        </el-select>

        <el-select v-model="sortBy" placeholder="排序方式" @change="handleSort">
          <el-option label="最新提交" value="recent" />
          <el-option label="最早提交" value="oldest" />
          <el-option label="执行时间" value="runtime" />
          <el-option label="内存消耗" value="memory" />
        </el-select>
      </div>
    </div>

    <!-- 提交记录列表 -->
    <div class="submissions-list">
      <div class="list-header">
        <h3>提交记录</h3>
        <span class="record-count">共 {{ filteredSubmissions.length }} 条记录</span>
      </div>

      <div class="submissions-table">
        <el-table
          :data="paginatedSubmissions"
          style="width: 100%"
          @row-click="viewSubmissionDetail"
        >
          <el-table-column prop="problemTitle" label="题目" min-width="200">
            <template #default="{ row }">
              <div class="problem-title-cell">
                <div class="title" @click.stop="viewProblem(row)">{{ row.problemTitle }}</div>
                <div class="problem-id">第{{ row.problemId }}题</div>
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="status" label="状态" width="120" align="center">
            <template #default="{ row }">
              <div class="status-cell" :class="getStatusClass(row.status)">
                <el-icon v-if="row.status === 'accepted'"><CircleCheck /></el-icon>
                <el-icon v-else><CircleClose /></el-icon>
                <span>{{ getStatusText(row.status) }}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="language" label="语言" width="100" align="center" />

          <el-table-column prop="runtime" label="执行时间" width="100" align="center">
            <template #default="{ row }">
              <span v-if="row.runtime">{{ row.runtime }}ms</span>
              <span v-else>-</span>
            </template>
          </el-table-column>

          <el-table-column prop="memory" label="内存消耗" width="100" align="center">
            <template #default="{ row }">
              <span v-if="row.memory">{{ row.memory }}MB</span>
              <span v-else>-</span>
            </template>
          </el-table-column>

          <el-table-column prop="submittedAt" label="提交时间" width="150" align="center">
            <template #default="{ row }">
              {{ formatDate(row.submittedAt) }}
            </template>
          </el-table-column>

          <el-table-column label="操作" width="200" align="center">
            <template #default="{ row }">
              <div class="action-buttons">
                <el-button size="small" @click.stop="viewCode(row)">
                  查看代码
                </el-button>
                <el-button
                  size="small"
                  type="primary"
                  @click.stop="resubmit(row)"
                >
                  重新提交
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页 -->
      <div class="pagination-container" v-if="filteredSubmissions.length > 0">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[20, 50, 100, 200]"
          :total="filteredSubmissions.length"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>

      <!-- 空状态 -->
      <div v-if="filteredSubmissions.length === 0" class="empty-state">
        <EmptyState
          image="/images/empty-submissions.svg"
          title="暂无提交记录"
          description="您还没有提交过任何代码"
        >
          <el-button type="primary" @click="goToProblemList">
            去刷题
          </el-button>
        </EmptyState>
      </div>
    </div>

    <!-- 提交趋势图 -->
    <div class="submission-trend" v-if="submissions.length > 0">
      <div class="trend-header">
        <h3>提交趋势</h3>
        <div class="trend-controls">
          <el-radio-group v-model="trendPeriod" size="small">
            <el-radio-button label="week">最近一周</el-radio-button>
            <el-radio-button label="month">最近一月</el-radio-button>
            <el-radio-button label="quarter">最近三月</el-radio-button>
          </el-radio-group>
        </div>
      </div>

      <div class="trend-chart">
        <div class="chart-placeholder">
          <el-icon><TrendCharts /></el-icon>
          <span>提交趋势图</span>
          <p>显示您在不同时间段的提交活动</p>
        </div>
      </div>
    </div>

    <!-- 语言统计 -->
    <div class="language-stats" v-if="submissions.length > 0">
      <h3>编程语言统计</h3>
      <div class="languages-grid">
        <div
          v-for="lang in languageStats"
          :key="lang.name"
          class="language-card"
        >
          <div class="language-icon">
            <span class="language-name">{{ lang.name }}</span>
          </div>
          <div class="language-content">
            <div class="language-count">{{ lang.count }}次提交</div>
            <div class="language-progress">
              <el-progress
                :percentage="Math.round(lang.count / stats.totalSubmissions * 100)"
                :show-text="false"
                :stroke-width="6"
              />
              <span class="progress-text">{{ Math.round(lang.count / stats.totalSubmissions * 100) }}%</span>
            </div>
            <div class="language-acceptance">
              通过率：{{ Math.round(lang.accepted / lang.count * 100) }}%
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 代码查看对话框 -->
    <el-dialog
      v-model="showCodeDialog"
      :title="`${selectedSubmission?.problemTitle} - 代码详情`"
      width="800px"
      top="5vh"
    >
      <div class="code-dialog-content" v-if="selectedSubmission">
        <div class="submission-info">
          <div class="info-item">
            <span class="label">提交状态：</span>
            <span class="value" :class="getStatusClass(selectedSubmission.status)">
              {{ getStatusText(selectedSubmission.status) }}
            </span>
          </div>
          <div class="info-item">
            <span class="label">编程语言：</span>
            <span class="value">{{ selectedSubmission.language }}</span>
          </div>
          <div class="info-item" v-if="selectedSubmission.runtime">
            <span class="label">执行时间：</span>
            <span class="value">{{ selectedSubmission.runtime }}ms</span>
          </div>
          <div class="info-item" v-if="selectedSubmission.memory">
            <span class="label">内存消耗：</span>
            <span class="value">{{ selectedSubmission.memory }}MB</span>
          </div>
          <div class="info-item">
            <span class="label">提交时间：</span>
            <span class="value">{{ formatDateTime(selectedSubmission.submittedAt) }}</span>
          </div>
        </div>

        <div class="code-content">
          <div class="code-header">
            <span>代码内容</span>
            <el-button size="small" @click="copyCode">
              <el-icon><CopyDocument /></el-icon>
              复制代码
            </el-button>
          </div>
          <div class="code-block">
            <pre><code>{{ selectedSubmission.code }}</code></pre>
          </div>
        </div>

        <div class="error-info" v-if="selectedSubmission.error">
          <div class="error-header">错误信息</div>
          <div class="error-content">
            <pre>{{ selectedSubmission.error }}</pre>
          </div>
        </div>
      </div>

      <template #footer>
        <el-button @click="showCodeDialog = false">关闭</el-button>
        <el-button type="primary" @click="resubmit(selectedSubmission)">
          重新提交
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import {
  Document, CircleCheck, TrendCharts, Trophy, Search,
  CircleClose, CopyDocument
} from '@element-plus/icons-vue'
import EmptyState from '@/components/global/EmptyState.vue'
import { ElMessage } from 'element-plus'

const router = useRouter()

// 响应式数据
const searchKeyword = ref('')
const statusFilter = ref('')
const languageFilter = ref('')
const sortBy = ref('recent')
const currentPage = ref(1)
const pageSize = ref(20)
const trendPeriod = ref('month')
const showCodeDialog = ref(false)
const selectedSubmission = ref(null)

// 统计数据
const stats = ref({
  totalSubmissions: 128,
  acceptedSubmissions: 89,
  acceptanceRate: 69,
  solvedProblems: 45
})

// 提交记录数据
const submissions = ref([
  {
    id: 1,
    problemId: 1,
    problemTitle: '两数之和',
    status: 'accepted',
    language: 'JavaScript',
    runtime: 68,
    memory: 15.2,
    submittedAt: new Date('2024-01-15 14:30:00'),
    code: `var twoSum = function(nums, target) {
    const map = new Map();
    for (let i = 0; i < nums.length; i++) {
        const complement = target - nums[i];
        if (map.has(complement)) {
            return [map.get(complement), i];
        }
        map.set(nums[i], i);
    }
    return [];
};`
  },
  {
    id: 2,
    problemId: 2,
    problemTitle: '两数相加',
    status: 'wrong_answer',
    language: 'Python',
    runtime: null,
    memory: null,
    submittedAt: new Date('2024-01-14 16:20:00'),
    code: `def addTwoNumbers(l1, l2):
    # 错误的实现
    return l1 + l2`,
    error: 'TypeError: unsupported operand type(s) for +: \'ListNode\' and \'ListNode\''
  },
  {
    id: 3,
    problemId: 3,
    problemTitle: '无重复字符的最长子串',
    status: 'time_limit_exceeded',
    language: 'Java',
    runtime: null,
    memory: null,
    submittedAt: new Date('2024-01-13 10:15:00'),
    code: `public int lengthOfLongestSubstring(String s) {
    // 超时的暴力解法
    int maxLen = 0;
    for (int i = 0; i < s.length(); i++) {
        for (int j = i; j < s.length(); j++) {
            if (hasUniqueChars(s.substring(i, j + 1))) {
                maxLen = Math.max(maxLen, j - i + 1);
            }
        }
    }
    return maxLen;
}`
  },
  // 添加更多提交记录...
  ...Array.from({ length: 125 }, (_, i) => ({
    id: i + 4,
    problemId: Math.floor(Math.random() * 100) + 1,
    problemTitle: `算法题目 ${Math.floor(Math.random() * 100) + 1}`,
    status: ['accepted', 'wrong_answer', 'time_limit_exceeded', 'runtime_error'][Math.floor(Math.random() * 4)],
    language: ['JavaScript', 'Python', 'Java', 'C++', 'Go'][Math.floor(Math.random() * 5)],
    runtime: Math.random() > 0.5 ? Math.floor(Math.random() * 200) + 50 : null,
    memory: Math.random() > 0.5 ? Math.floor(Math.random() * 20) + 10 : null,
    submittedAt: new Date(Date.now() - Math.random() * 30 * 24 * 60 * 60 * 1000),
    code: '// 示例代码\nfunction solution() {\n    return "Hello World";\n}'
  }))
])

// 计算属性
const filteredSubmissions = computed(() => {
  let filtered = submissions.value

  // 搜索筛选
  if (searchKeyword.value) {
    const keyword = searchKeyword.value.toLowerCase()
    filtered = filtered.filter(submission =>
      submission.problemTitle.toLowerCase().includes(keyword)
    )
  }

  // 状态筛选
  if (statusFilter.value) {
    filtered = filtered.filter(submission => submission.status === statusFilter.value)
  }

  // 语言筛选
  if (languageFilter.value) {
    filtered = filtered.filter(submission => submission.language === languageFilter.value)
  }

  // 排序
  switch (sortBy.value) {
    case 'oldest':
      filtered.sort((a, b) => new Date(a.submittedAt) - new Date(b.submittedAt))
      break
    case 'runtime':
      filtered.sort((a, b) => (a.runtime || 999999) - (b.runtime || 999999))
      break
    case 'memory':
      filtered.sort((a, b) => (a.memory || 999999) - (b.memory || 999999))
      break
    default: // recent
      filtered.sort((a, b) => new Date(b.submittedAt) - new Date(a.submittedAt))
  }

  return filtered
})

const paginatedSubmissions = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filteredSubmissions.value.slice(start, end)
})

const languageStats = computed(() => {
  const stats = {}
  submissions.value.forEach(submission => {
    if (!stats[submission.language]) {
      stats[submission.language] = { count: 0, accepted: 0 }
    }
    stats[submission.language].count++
    if (submission.status === 'accepted') {
      stats[submission.language].accepted++
    }
  })

  return Object.entries(stats)
    .map(([name, data]) => ({ name, ...data }))
    .sort((a, b) => b.count - a.count)
})

// 方法
const getStatusClass = (status) => {
  const classes = {
    'accepted': 'success',
    'wrong_answer': 'error',
    'time_limit_exceeded': 'warning',
    'runtime_error': 'error',
    'compile_error': 'error'
  }
  return classes[status] || 'default'
}

const getStatusText = (status) => {
  const texts = {
    'accepted': '通过',
    'wrong_answer': '答案错误',
    'time_limit_exceeded': '超时',
    'runtime_error': '运行错误',
    'compile_error': '编译错误'
  }
  return texts[status] || '未知'
}

const formatDate = (date) => {
  return new Date(date).toLocaleDateString('zh-CN', {
    month: 'short',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit'
  })
}

const formatDateTime = (date) => {
  return new Date(date).toLocaleString('zh-CN')
}

const handleSearch = () => {
  currentPage.value = 1
}

const handleFilter = () => {
  currentPage.value = 1
}

const handleSort = () => {
  currentPage.value = 1
}

const handleSizeChange = (size) => {
  pageSize.value = size
  currentPage.value = 1
}

const handleCurrentChange = (page) => {
  currentPage.value = page
}

const viewSubmissionDetail = (submission) => {
  selectedSubmission.value = submission
  showCodeDialog.value = true
}

const viewProblem = (submission) => {
  router.push(`/coding/problem/${submission.problemId}`)
}

const viewCode = (submission) => {
  selectedSubmission.value = submission
  showCodeDialog.value = true
}

const resubmit = (submission) => {
  router.push(`/coding/editor/${submission.problemId}`)
}

const goToProblemList = () => {
  router.push('/coding/problems')
}

const copyCode = () => {
  if (selectedSubmission.value?.code) {
    navigator.clipboard.writeText(selectedSubmission.value.code)
    ElMessage.success('代码已复制到剪贴板')
  }
}

onMounted(() => {
  // 初始化数据
})
</script>

<style lang="scss" scoped>
.my-submissions {
  min-height: 100vh;
  background: var(--el-bg-color-page);
  padding: 20px;
}

.stats-overview {
  margin-bottom: 24px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.stat-card {
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  gap: 16px;

  .stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--el-color-primary-light-9);
    color: var(--el-color-primary);
    font-size: 24px;

    &.accepted {
      background: var(--el-color-success-light-9);
      color: var(--el-color-success);
    }
  }

  .stat-content {
    .stat-number {
      font-size: 24px;
      font-weight: 700;
      color: var(--el-text-color-primary);
      margin-bottom: 4px;
    }

    .stat-label {
      font-size: 12px;
      color: var(--el-text-color-secondary);
    }
  }
}

.filter-section {
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 24px;

  @media (max-width: 1024px) {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
}

.filter-left {
  .el-input {
    width: 300px;

    @media (max-width: 1024px) {
      width: 100%;
    }
  }
}

.filter-right {
  display: flex;
  gap: 12px;

  @media (max-width: 1024px) {
    flex-wrap: wrap;
  }

  .el-select {
    width: 120px;

    @media (max-width: 768px) {
      flex: 1;
      min-width: 100px;
    }
  }
}

.submissions-list {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  margin-bottom: 24px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 24px;
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--el-text-color-primary);
  }

  .record-count {
    font-size: 14px;
    color: var(--el-text-color-secondary);
  }
}

.problem-title-cell {
  .title {
    font-weight: 500;
    margin-bottom: 4px;
    color: var(--el-text-color-primary);
    cursor: pointer;

    &:hover {
      color: var(--el-color-primary);
    }
  }

  .problem-id {
    font-size: 12px;
    color: var(--el-text-color-placeholder);
  }
}

.status-cell {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;

  &.success {
    color: var(--el-color-success);
  }

  &.error {
    color: var(--el-color-danger);
  }

  &.warning {
    color: var(--el-color-warning);
  }
}

.action-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
}

.submission-trend,
.language-stats {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  margin-bottom: 24px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 24px;

  h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--el-text-color-primary);
  }
}

.trend-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.trend-chart {
  height: 300px;
  background: var(--el-fill-color-extra-light);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .chart-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--el-text-color-placeholder);
    text-align: center;

    .el-icon {
      font-size: 48px;
    }

    span {
      font-size: 16px;
      font-weight: 500;
    }

    p {
      font-size: 14px;
      margin: 0;
    }
  }
}

.languages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.language-card {
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 8px;
  padding: 20px;
  display: flex;
  gap: 16px;
  transition: all 0.3s ease;

  &:hover {
    border-color: var(--el-color-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  .language-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: var(--el-color-primary-light-9);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    .language-name {
      font-size: 12px;
      font-weight: 600;
      color: var(--el-color-primary);
    }
  }

  .language-content {
    flex: 1;

    .language-count {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 8px;
      color: var(--el-text-color-primary);
    }

    .language-progress {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 4px;

      .el-progress {
        flex: 1;
      }

      .progress-text {
        font-size: 12px;
        color: var(--el-text-color-secondary);
        min-width: 35px;
      }
    }

    .language-acceptance {
      font-size: 12px;
      color: var(--el-text-color-placeholder);
    }
  }
}

.code-dialog-content {
  .submission-info {
    background: var(--el-fill-color-extra-light);
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 20px;

    .info-item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;

      &:last-child {
        margin-bottom: 0;
      }

      .label {
        font-weight: 500;
        color: var(--el-text-color-secondary);
      }

      .value {
        color: var(--el-text-color-primary);

        &.success {
          color: var(--el-color-success);
        }

        &.error {
          color: var(--el-color-danger);
        }

        &.warning {
          color: var(--el-color-warning);
        }
      }
    }
  }

  .code-content {
    margin-bottom: 20px;

    .code-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;

      span {
        font-weight: 500;
        color: var(--el-text-color-primary);
      }
    }

    .code-block {
      background: #1e1e1e;
      border-radius: 6px;
      padding: 16px;
      max-height: 400px;
      overflow-y: auto;

      pre {
        margin: 0;
        color: #d4d4d4;
        font-family: 'Consolas', 'Monaco', monospace;
        font-size: 14px;
        line-height: 1.5;
        white-space: pre-wrap;
        word-break: break-all;
      }
    }
  }

  .error-info {
    .error-header {
      font-weight: 500;
      margin-bottom: 12px;
      color: var(--el-color-danger);
    }

    .error-content {
      background: var(--el-color-danger-light-9);
      border: 1px solid var(--el-color-danger-light-5);
      border-radius: 6px;
      padding: 12px;

      pre {
        margin: 0;
        color: var(--el-color-danger-dark-2);
        font-family: 'Consolas', 'Monaco', monospace;
        font-size: 13px;
        line-height: 1.4;
        white-space: pre-wrap;
      }
    }
  }
}

:deep(.el-table) {
  .el-table__row {
    cursor: pointer;

    &:hover {
      background-color: var(--el-fill-color-extra-light);
    }
  }
}

@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .languages-grid {
    grid-template-columns: 1fr;
  }

  .language-card {
    flex-direction: column;
    text-align: center;

    .language-icon {
      align-self: center;
    }
  }

  .action-buttons {
    flex-direction: column;
    gap: 4px;

    .el-button {
      font-size: 12px;
      padding: 4px 8px;
    }
  }

  .code-dialog-content {
    .submission-info {
      .info-item {
        flex-direction: column;
        gap: 4px;
        text-align: left;
      }
    }

    .code-header {
      flex-direction: column;
      gap: 8px;
      align-items: flex-start;
    }
  }
}
</style>